<template>
  <div class="app-container">
    <div class="head">
      <img src="@/assets/img/Layout/position.png" />
      <p class="see-block">产品详情</p>
    </div>
    <div class="view-container">
      <el-row class="detail-item">
        <el-col :span="10">
            <span>产品编码：</span>{{ detailData.code ?  detailData.code : '暂无'}}
        </el-col>
      </el-row>
      <el-row class="detail-item">
        <el-col :span="10">
            <span>产品名称：</span>{{ detailData.productName ?  detailData.productName : '暂无'}}
        </el-col>
      </el-row>
      <el-row class="detail-item">
        <el-col :span="10">
            <span>产品规格：</span>{{ detailData.specifications ?  detailData.specifications : '暂无'}}
        </el-col>
      </el-row>
      <el-row class="detail-item">
        <el-col :span="24">
            <span>产品图片：</span>
            <div style="width:100%;">
              <template v-if="JSON.stringify(detailData.shareFileList) !== '[]'">
                <div v-for="item in detailData.shareFileList" :key="item.id" class="item-img">
                  <img :src="item.fileUrl">
                </div>
              </template>
              <template v-else>暂无</template>
            </div>
        </el-col>
      </el-row>
      <el-row class="detail-item">
        <el-col :span="24">
            <span>使用方法：</span><a :href="detailData.methodOfUse">{{ detailData.methodOfUse ?  detailData.methodOfUse : '暂无'}}</a>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { antiCodeDetail } from "@/api/system/antiCode/antiCode"
export default {
  name: "detail",
  data(){
    return {
      id: '',
      detailData: '',
    }
  },
  created() {
    this.id = this.$route.query.id
    this.getDetailData()
  },
  methods: {
    // 获取详情信息
    getDetailData() {
      antiCodeDetail(this.id).then(res => {
        this.detailData = res.data
      })
    }
  }
}
</script>


<style scoped>
.item-img{
  float: left;
  margin:0 10px 10px 0;
  width: 145px;
  height: 145px;
  overflow: hidden;
}
.item-img img{
  width: 100%;
}
</style>